<template>
  <view class="form-ret-padd">
    <u-popup
      :show="visible"
      mode="center"
      @close="close"
      @touchmove.stop.prevent
      :safeAreaInsetBottom="false"
      round="8"
    >
      <view class="add-area">
        <view class="title center"
          >{{ type !== "add" ? "编辑" : "添加" }}区域</view
        >
        <u--form :model="form" :rules="rules" ref="form1">
          <u-form-item prop="name" labelWidth="0rpx">
            <view class="show-count">
              <u--input
                type="textarea"
                maxlength="12"
                v-model="form.name"
                showWordLimit
                @blur="blurInput"
              />
              <view class="num">{{ form.name.length || 0 }}/4</view>
            </view>
          </u-form-item>
        </u--form>
      </view>
      <view class="flex btns" :style="{ '--theme': themeColor }">
        <view @click="close()" class="flex1 center">取消</view>
        <view @click="save()" class="flex1 center save">保存</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { addShopArea, updateArea } from "@/service/api/sp-product/index";
import {regexp} from '@/utils/regexp'
import { mapState } from "vuex";

export default {
  data() {
    return {
      visible: false,
      type: "add",
      form: {
        name: "",
        id: "",
      },
      rules: {
        name: [
          {
            type: "string",
            required: true,
            message: "请输入区域名称",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              return this.areaList.findIndex((item) => {
                return item.name == value;
              }) > -1
                ? false
                : true;
            },
            message: `您${
              this.type === "add" ? "添加" : "编辑"
            }的区域已存在，不可重复`,
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return regexp.isSpecialCharStart(value);
            },
            message: "格式错误，暂不支持空格、特殊符号",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    ...mapState("sp-commodity/index", ["areaList"]),
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  mounted() {
    this.$refs.form1.setRules(this.rules);
    // this.getAreaList();
    // console.log(this.areaList);
  },
  methods: {
    open(row) {
      this.type = row ? "edit" : "add";
      if (row) {
        this.form = JSON.parse(JSON.stringify(row));
      }
      this.visible = true;
    },
    close(type) {
      this.visible = false;
      this.form = {
        name: "",
        id: "",
      };
      this.$refs.form1.clearValidate();
      if (type) {
        this.$parent.getAreaList();
      }
    },
    save() {
      let {
        type,
        pubUserInfo: {
          pubDomainShopVo: { id: pubDomainShopId },
        },
        form: { name, id },
      } = this;
      this.$refs.form1.validate().then((res) => {
        let queryParams = {
          pubDomainShopId,
          name,
          id,
        };
        if (type === "add") {
          delete queryParams.id;
          addShopArea(queryParams).then((res) => {
            this.close(1);
          });
        } else {
          updateArea(queryParams).then((res) => {
            this.close(1);
          });
        }
      });
    },
    blurInput() {
      let {
        form: { name },
      } = this;
      this.form.name = name.length > 4 ? name.substring(0, 4) : name;
    },
  },
};
</script>
<style lang="scss" scoped>
.add-area {
  width: calc(100vw - 250rpx);
  padding: 40rpx 45rpx 25rpx;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #131313;
    margin-bottom: 25rpx;
  }
}
.btns {
  border-radius: 0rpx 0 12rpx 12rpx;
  overflow: hidden;
  view {
    height: 80rpx;
    color: var(--theme);
    border-top: 1px solid #eee;
  }
  .save {
    background-color: var(--theme);
    color: #fff !important;
    border-color: var(--theme) !important;
  }
}
</style>
